<!-- 个人中心 -->
<template>
	<view class="personal-wrap">
		<!-- 个人信息卡片 -->
		<userinfo-card :scrollTop="scrollTop" :detail="userHeadData" @onShare="onShare"></userinfo-card>
		<view class="padd-box">
			<view class="title-box flexWrapNo">
				<image src="../../static/images/user/travel.png" class="travel-icon"></image>
				<text>旅游订单</text>
			</view>
			<view class="sh-order-box u-flex u-m-b-10 u-p-r-20">
				<view class="order-box u-flex">
					<view class="order-item u-flex-col " @tap="jump('/pages/order/list', { type: order.type })" v-for="order in orderNav" :key="order.id">
						<view class="u-flex-col item-box u-col-center">
							<image class="order-img" :src="order.img" mode=""></image>
							<text class="item-title">{{ order.title }}</text>
						</view>
					</view>
				</view>
				<view class="order-item u-flex-col all-order " @tap="jump('/pages/order/list', { type: 'all' })">
					<image class="cut-off--line" :src="$IMG_URL + '/imgs/user/cut_off_line.png'" mode=""></image>
					<view class="u-flex-col item-box u-col-center">
						<image class="order-img" src="/static/images/user/all.png" mode="aspectFill"></image>
						<text class="item-title">全部订单</text>
					</view>
				</view>
			</view>
			<view class="title-box flexWrapNo shop">
				<image src="/static/images/user/shop-icon.png" class="shop-icon"></image>
				<text>商品订单</text>
			</view>
			<view class="sh-order-box u-flex u-m-b-10 u-p-r-20 shop-order-box">
				<view class="order-box u-flex">
					<view class="order-item u-flex-col " @tap="jump('/pages/order/list', { type: order.type })" v-for="order in orderShopNav" :key="order.id">
						<view class="u-flex-col item-box u-col-center">
							<image class="order-img" :src="order.img" mode=""></image>
							<text class="item-title">{{ order.title }}</text>
						</view>
					</view>
				</view>
				<view class="order-item u-flex-col all-order " @tap="jump('/pages/order/list', { type: 'all' })">
					<image class="cut-off--line" :src="$IMG_URL + '/imgs/user/cut_off_line.png'" mode=""></image>
					<view class="u-flex-col item-box u-col-center">
						<image class="order-img" src="/static/images/user/all.png" mode="aspectFill"></image>
						<text class="item-title">全部订单</text>
					</view>
				</view>
			</view>
			<view class="sh-grid-box u-m-b-10">
				<u-grid :col="4" :border="false">
					<u-grid-item :border="false" name="item1" v-for="(menu, index) in list" :key="index" @click="menujump(menu.path)">
						<image class="tool-img" :src="menu.image" mode="aspectFill"></image>
						<view class="item-title">{{ menu.name }}</view>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
		<!-- #ifdef H5 -->
		<view class="tabbar-hack" style="height: 120rpx; width:100%;"></view>
		<!-- #endif -->
		<!-- 关注弹窗 -->
		<shopro-float-btn></shopro-float-btn>
		<!-- 登录提示 -->
		<shopro-auth-modal v-if="authType"></shopro-auth-modal>
		<!-- 分享组件 -->
		<shopro-share v-model="showShare" :shareDetail="shareInfo" posterType="user"></shopro-share>
	</view>
</template>

<script>
import shGridSwiper from './components/sh-grid-swiper.vue';
import shHotGoods from './components/sh-hot-goods.vue';
import shAdv from './components/sh-adv.vue';
import shCoupon from './components/sh-coupon.vue';
import shSeckill from './components/sh-seckill.vue';
import shGroupon from './components/sh-groupon.vue';
import shRichtext from './components/sh-richtext.vue';
import shCell from './components/sh-cell.vue';
import shGrid from './components/sh-grid.vue';
import shTitleCard from './components/sh-title-card.vue';
import shWallet from './components/sh-wallet.vue';
import shSearch from './components/sh-search.vue';
import shCategoryTabs from './components/sh-category-tabs.vue';

import userinfoCard from './user/userinfo-card.vue';

import { mapMutations, mapActions, mapState } from 'vuex';

// #ifdef MP-WEIXIN
import { HAS_LIVE } from '@/env';
import shLive from './components/sh-live.vue';
// #endif

import share from '@/shopro/share';

export default {
	components: {
		shGridSwiper,
		shGroupon,
		shHotGoods,
		shAdv,
		shCoupon,
		shSeckill,
		shRichtext,
		shCell,
		shGrid,
		shTitleCard,
		shWallet,
		shSearch,
		shCategoryTabs,

		userinfoCard,
	},
	data() {
		return {
			// #ifdef MP-WEIXIN
			HAS_LIVE: HAS_LIVE,
			// #endif
			scrollTop: 0,
			showShare: false,
			enable: false ,//是否开启吸顶。
			orderNav: [
				{
					id: 1,
					title: '待付款',
					img: '/static/images/user/travel/nopay.png',
					type: 'nopay'
				},
				{
					id: 2,
					title: '待发货',
					img: '/static/images/user/travel/nosend.png',
					type: 'nosend'
				},
				{
					id: 4,
					title: '待评价',
					img: '/static/images/user/travel/nocomment.png',
					type: 'nocomment'
				},
				{
					id: 5,
					title: '退款',
					img:'/static/images/user/travel/aftersale.png',
					type: 'aftersale'
				}
			],
			orderShopNav: [
				{
					id: 1,
					title: '待付款',
					img: '/static/images/user/shop/nopay.png',
					type: 'nopay'
				},
				{
					id: 2,
					title: '待发货',
					img: '/static/images/user/shop/nosend.png',
					type: 'nosend'
				},
				{
					id: 4,
					title: '待评价',
					img: '/static/images/user/shop/nocomment.png',
					type: 'nocomment'
				},
				{
					id: 5,
					title: '退款',
					img:'/static/images/user/shop/aftersale.png',
					type: 'aftersale'
				}
			],
			list:[
				{
					image: "/static/images/user/tx.png",
					name: "提现",
					path: "/pages/user/wallet/withdraw",
				},
				{
					image: "/static/images/user/sz.png",
					name: "收支明细",
					path: "/pages/user/favorite"
				},
				{
					image: "/static/images/user/jf.png",
					name: "积分明细",
					path: "/pages/user/favorite",
				},
				{
					image: "/static/images/user/dkq.png",
					name: "抵扣券明细",
					path: "/pages/user/favorite",
				},
				{
					image: "/static/images/user/td.png",
					name: "我的团队",
					path: "/pages/user/myTeam",
				},
				{
					image: "/static/images/user/yj.png",
					name: "我的佣金",
					path: "/pages/user/commission"
				},
				{
					image: "/static/images/user/tddd.png",
					name: "团队订单",
					path: "/pages/user/favorite",
				},
				{
					image: "/static/images/user/lysc.png",
					name: "旅游收藏",
					path: "/pages/user/favorite",
				},
				{
					image: "/static/images/user/spsc.png",
					name: "商品收藏",
					path: "/pages/user/favorite",
				},
				{
					image: "/static/images/user/bwbd.png",
					name: "百问百答",
					path: "/pages/user/favorite"
				},
				{
					image: "/static/images/user/ppjs.png",
					name: "品牌介绍",
					path: "/pages/user/favorite",
				},
				{
					image: "/static/images/user/lxkf.png",
					name: "联系客服",
					path: "/pages/user/favorite",
				},
				{
					image: "/static/images/user/shdz.png",
					name: "收货地址",
					path: "/pages/user/address/list",
				},
				{
					image: "/static/images/user/xtsz.png",
					name: "系统设置",
					path: "/pages/user/set"
				},
				{
					image: "/static/images/user/ysyx.png",
					name: "隐私协议",
					path: "/pages/public/richtext?id=2",
				},
				{
					image: "/static/images/user/yhxy.png",
					name: "用户协议",
					path: "/pages/public/richtext?id=1",
				},
			]
		};
	},
	computed: {
		...mapState({
			shop: ({ shopro }) => shopro.config?.shop, // 版本信息
			userTemplate: ({ shopro }) => shopro.template?.user, //模板数据
			userInfo: ({ user }) => user.userInfo,
			isLogin: ({ user }) => user.isLogin,
			authType: ({ user }) => user.authType
		}),
		userHeadData() {
			if (this.userTemplate?.length) {
				return this.userTemplate[0].content;
			}
		},
	},
	// 下拉刷新
	onPullDownRefresh() {
		this.init();
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},

	onShow() {
		if (this.isLogin) {
			this.init();
			this.getUserData();
		}
		this.enable = true;
		this.$store.commit('CART_NUM');
	},

	methods: {
		...mapActions(['getUserInfo', 'showAuthModal', 'getUserData']),
		onShare() {
			this.shareInfo = share.setShareInfo();
			console.log(this.shareInfo)
			this.showShare = true;
		},
		// 初始化
		init() {
			this.getUserInfo()
				.then(res => {
					uni.stopPullDownRefresh();
				})
				.catch(e => {
					uni.stopPullDownRefresh();
				});
		},
		jump(path, query) {
			this.$Router.push({
				path: path,
				query: query
			});
		},
		menujump(path){
			uni.navigateTo({
				url:path
			})
		}
	}
};
</script>

<style lang="scss">
.padd-box{
	padding: 30upx;
}
.sh-grid-box {
	display: flex;
	flex-wrap: wrap;
	.u-grid-item{
		background-color:transparent !important;
	}
	.tool-img {
		width: 68rpx;
		height: 68rpx;
	}
	.item-title {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #474747;
		line-height: 24rpx;
		padding-top: 30rpx;
	}
}
.title-box{
	font-family: PingFang SC, PingFang SC;
	font-weight: bold;
	font-size: 32rpx;
	color: #04AC3C;
	margin-bottom: 10upx;
	justify-content: center;
	align-items: flex-end;
	.travel-icon{
		width: 42upx;
		height: 50upx;
		margin-right: 8upx;
	}
	.shop-icon{
		width: 32upx;
		height: 28upx;
		margin-right: 8upx;
	}
}
.shop{
	color:#F39800;
}
// 订单卡片
.sh-order-box {
	height: 118rpx;
	background: #fff;
	border-radius: 10upx;
	margin-bottom: 30upx !important;
	.order-box {
		flex: 4;
	}
	.order-item {
		flex: 1;
		.item-box {
			position: relative;
		}
		.order-img {
			width: 36rpx;
			height: 34rpx;
		}

		.item-title {
			font-size: 26rpx;
			font-weight: 500;
			color: #04AC3C;
			line-height: 24rpx;
			margin-top: 20rpx;
		}
	}
	.all-order {
		position: relative;
		.cut-off--line {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			right: (750rpx/5) - 15rpx;
			width: 30rpx;
			height: 136rpx;
		}
		
		.order-img {
			width: 32rpx;
			height: 36rpx;
		}
		
		.item-title {
			font-size: 26rpx;
			font-weight: 500;
			color:rgba(153, 153, 153, 1);
			line-height: 24rpx;
			margin-top: 20rpx;
		}
	}
}
.shop-order-box{
	.item-title {
		color: #6A6A6A !important;
	}
}
</style>
